{% extends 'tasks/base.html' %}

{% block title %}用户中心{% endblock %}

{% block content %}
    <div class="container py-4">
        <div class="row">
            <!-- 左侧用户信息 -->
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">个人资料</h5>
                    </div>
                    <div class="card-body">
                        <div class="text-center mb-3">
                            <div class="avatar-placeholder bg-light rounded-circle mx-auto mb-3"
                                 style="width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;">
                                <i class="bi bi-person-circle" style="font-size: 3rem;"></i>
                            </div>
                            <h4>{{ user.username }}</h4>
                            {% if user.first_name or user.last_name %}
                                <p class="text-muted">{{ user.first_name }} {{ user.last_name }}</p>
                            {% endif %}
                            <p class="text-muted">{{ user.email }}</p>
                        </div>
                        <div class="d-grid gap-2">
                            <a href="{% url 'user-profile-update' %}" class="btn btn-outline-primary">
                                <i class="bi bi-pencil-square"></i> 编辑个人资料
                            </a>
                            <a href="{% url 'export-tasks-form' %}" class="btn btn-outline-success">
                                <i class="bi bi-download"></i> 导出任务数据
                            </a>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="row text-center">
                            <div class="col total_tasks">
                                <h5>{{ total_tasks }}</h5>
                                <small class="text-muted">总任务</small>
                            </div>
                            <div class="col done_count">
                                <h5>{{ done_count }}</h5>
                                <small class="text-muted">已完成</small>
                            </div>
                            <div class="col in_progress_count">
                                <h5>{{ in_progress_count }}</h5>
                                <small class="text-muted">进行中</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧任务信息 -->
            <div class="col-md-8">
                <!-- 即将到期的任务 -->
                <div class="card mb-4">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0"><i class="bi bi-alarm"></i> 即将到期的任务</h5>
                    </div>
                    <div class="card-body">
                        {% if upcoming_tasks %}
                            <div class="list-group">
                                {% for task in upcoming_tasks %}
                                    <a href="{% url 'task-detail' task.id %}"
                                       class="list-group-item list-group-item-action">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h6 class="mb-1">{{ task.title }}</h6>
                                            <small class="text-danger">
                                                {% if task.due_date %}
                                                    截止日期: {{ task.due_date }}
                                                {% endif %}
                                            </small>
                                        </div>
                                        <small class="text-muted">
                                            状态:
                                            {% if task.status == 'todo' %}
                                                <span class="badge bg-danger">待办</span>
                                            {% elif task.status == 'in_progress' %}
                                                <span class="badge bg-warning text-dark">进行中</span>
                                            {% endif %}
                                        </small>
                                    </a>
                                {% endfor %}
                            </div>
                        {% else %}
                            <p class="text-muted">没有即将到期的任务</p>
                        {% endif %}
                    </div>
                </div>

                <!-- 分配给我的任务 -->
                <div class="card mb-4">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0"><i class="bi bi-inbox"></i> 分配给我的任务</h5>
                    </div>
                    <div class="card-body">
                        {% if assigned_tasks %}
                            <div class="list-group">
                                {% for task in assigned_tasks %}
                                    <a href="{% url 'task-detail' task.id %}"
                                       class="list-group-item list-group-item-action">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h6 class="mb-1">{{ task.title }}</h6>
                                            <small>
                                                {% if task.status == 'todo' %}
                                                    <span class="badge bg-danger">待办</span>
                                                {% elif task.status == 'in_progress' %}
                                                    <span class="badge bg-warning text-dark">进行中</span>
                                                {% elif task.status == 'done' %}
                                                    <span class="badge bg-success">已完成</span>
                                                {% endif %}
                                            </small>
                                        </div>
                                        <small class="text-muted">
                                            {% if task.due_date %}
                                                截止日期: {{ task.due_date }}
                                            {% endif %}
                                        </small>
                                    </a>
                                {% endfor %}
                            </div>
                            <div class="mt-3 text-end">
                                <a href="{% url 'task-list' %}?assigned_to={{ user.id }}"
                                   class="btn btn-sm btn-outline-info">查看全部</a>
                            </div>
                        {% else %}
                            <p class="text-muted">没有分配给您的任务</p>
                        {% endif %}
                    </div>
                </div>

                <!-- 我创建的任务 -->
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="bi bi-file-earmark-plus"></i> 我创建的任务</h5>
                    </div>
                    <div class="card-body">
                        {% if created_tasks %}
                            <div class="list-group">
                                {% for task in created_tasks %}
                                    <a href="{% url 'task-detail' task.id %}"
                                       class="list-group-item list-group-item-action">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h6 class="mb-1">{{ task.title }}</h6>
                                            <small>
                                                {% if task.status == 'todo' %}
                                                    <span class="badge bg-danger">待办</span>
                                                {% elif task.status == 'in_progress' %}
                                                    <span class="badge bg-warning text-dark">进行中</span>
                                                {% elif task.status == 'done' %}
                                                    <span class="badge bg-success">已完成</span>
                                                {% endif %}
                                            </small>
                                        </div>
                                        {#                                    <p class="mb-1 text-truncate">{{ task.description|truncatechars:100 }}</p>#}
                                        <small class="text-muted">
                                            创建于: {{ task.created_at|date:"Y-m-d H:i" }}
                                        </small>
                                    </a>
                                {% endfor %}
                            </div>
                            <div class="mt-3 text-end">
                                <a href="{% url 'task-list' %}?created_by={{ user.id }}"
                                   class="btn btn-sm btn-outline-primary">查看全部</a>
                            </div>
                        {% else %}
                            <p class="text-muted">您还没有创建任何任务</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}